<template>
  <div id="app">

    <h1>{{ msg }}</h1>
    <!-- 通过父组件给子组件传递函数类型的props实现方式：实际调用的是父组件的getSchoolName函数 -->
    <School :getSchoolName="getSchoolName"></School>

    <!-- 给Student绑定一个事件 aBiu 子给父组件传事件-->
    <!-- 绑定了一个aBiu事件，是从子组件传过来的，可以这样接收到，使用了aBiu事件，就调用到getStudentName函数 -->
    <!-- 通过子组件给父组件绑定一个自定义事件的实现方式： -->
    <Student v-on:aBiu="getStudentName"></Student>

    <!-- 用 v-on 或者 @ 的写法 -->
    <!-- <Student @aBiu="getStudentName"></Student> -->

    <!-- 可以绑定多个事件 -->
    <!-- <Student @aBiu="getStudentName" @event2="method2"></Student> -->

    <!-- 自定义事件的另一种写法 ref -->
    <!-- <Student ref="stu"></Student> -->

  </div>
</template>

<script>
// 引入自定义组件
import School from './components/School.vue'
import Student from './components/Student.vue'

export default {
  name: 'App',
  components: {
    School,
    Student
  },
  data() {
    return {
      msg: '你好啊！',
    }
  },
  methods: {
    getSchoolName(name,) {
      alert('App收到了学校名：' + name);
    },
    // 接收多个参数的话这样：
    // getSchoolName(name, ...params) {
    //   // 接收多个参数的话这样：
    //   // console.log('App收到了学校名：' + name, params);
    // },

    getStudentName(name) {  // 自定义事件绑定的函数
      alert('App收到了学生名：' + name);
    }
  },
  mounted() {
    // 配合 ref 绑定事件的写法
    // this.$refs.stu.$on('aBiu', this.getStudentName)
  }

}
</script>

<style scoped>
.app {
  background-color: gray;
}
</style>
